<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>查看物流</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>

	<body>
		<div class="mui-content">
			<!-- 查看物流 -->
			<div class="logistics-top">
				<img src="../../../../images/cart/icon_order_logistics_package.png" class="order_logistics">
				<div class="log-info">
					<div class="company-name">
						<span>快递公司：</span><span class="name">百世汇通</span>
					</div>
					<div class="log-code">
						<div class="log-code-left">
							<span>快递单号 ：</span><span id="log-code" class="name">110110110110</span>
						</div>
						<div class="log-code-right">
							<img src="../../../../images/cart/icon_order_logistics_copy.png" class="logistics_copy">
							<span>复制单号</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 物流明细 -->
			<div class="log-list">
				<div class="log-list-item active-item">
					<span class="icon"></span>
					<span class="line"></span>
					<span class="text">您的订单在【郑州分拣中心】验货完成, 正在等待分配配送员</span>
					<span class="time">2021.4.11 17.34</span>
				</div>
				<div class="log-list-item">
					<span class="icon"></span>
					<span class="line"></span>
					<span class="text">您的订单在5454564545454545454【郑州分拣中心】验货完成, 正在等待分配配送员</span>
					<span class="time">2021.4.11 17.34</span>
				</div>
				<div class="log-list-item">
					<span class="icon"></span>
					<span class="line"></span>
					<span class="text">您的订单在5454564545454545454【郑州分拣中心】验货完成, 正在等待分配配送员</span>
					<span class="time">2021.4.11 17.34</span>
				</div>
				<div class="log-list-item">
					<span class="icon"></span>
					<span class="line"></span>
					<span class="text">您的订单在5454564545454545454【郑州分拣中心】验货完成, 正在等待分配配送员</span>
					<span class="time">2021.4.11 17.34</span>
				</div>
			</div>
		</div>
		<script src="../../../../js/mui.js"></script>
		<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../js/resize.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			$(function($) {
				// 文档一加载就执行
				$(document).ready(function() {
					obj.setRem()
				})
				// 页面自适应
				$(window).resize(function() {
					obj.setRem()
				});
				// 复制
				$('.log-code-right').click(function(){
					console.log($('#log-code').text())
					
				})
				// log-list-item 最后一个去掉线
				$('.log-list-item:last').children('.line').css('display','none');
				// 动态计算线条的height
				$('.log-list-item').each(function(e, item) {
					let el_hight = ($(item).height() * 6.25 / 100 +0.9375)+ 'rem';
					$(item).children('.line').height(el_hight)
					console.log($(item).height())
				})
				// 激活状态
				$('.active-item').children('.icon').attr('class','icon active-icon');
				$('.active-item').children('.text').attr('class','text active-text');
			});
		</script>
	</body>

</html>
